<script lang="ts" setup>


import { computed, onMounted, ref } from 'vue'
import {getOrderList,getRefundDetail,getRefundUpdate} from '@/api/dingdan/dingdan'

let data=ref([])
//获取数据
onMounted(() => {
    getOrderList().then((res)=>{
        data.value=Object.values(res.data.data)

    })
})

//详情弹框
const dialogVisible = ref(false);
// 定义数据
let useFrom =ref<any>({
         describe:'',
         id:'',
         manber_id:'',
         order_id:'',
         order_price:'',
         reason:'',
         return_sn:'',
         return_time:'',
         return_type:'',
         status:'',
         info:{}
})


//退货详情
const handleEdit = (index: number, row: any) => {
    dialogVisible.value = true;
    getRefundDetail(row.id).then((res)=>{
        useFrom.value=res
    })
}
const handleDelete = (index: number, row: any) => {
    useFrom.value=row
    let obj={
        id:useFrom.value.id,
        status:useFrom.value.status==2?"同意":"拒绝"
    }
    getRefundUpdate(obj).then((res)=>{
        console.log(res);
    })
}
</script>

<template>


<el-table :data="data" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="用户名" prop="manber" />
    <el-table-column label="订单号" prop="order_id" />
    <el-table-column label="价格" prop="order_price" />
    <el-table-column label="退货原因" prop="reason" />
    <el-table-column label="返回编号" prop="return_sn" />
    <el-table-column label="返回时间" prop="return_time" />
    <el-table-column label="返回时间" prop="return_type" #default="scope">
            <el-button>{{ scope.row.return_type==1?'退货':'换货' }}</el-button>
        </el-table-column>
    <el-table-column label="状态" prop="status" #default="scope">
        <el-switch v-model="scope.row.status"  :active-value="2" :inactive-value="1"/>
        </el-table-column>
       

    <!-- <el-table-column label="用户名" prop="manber_id" /> -->

    <el-table-column align="right">
     
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >退货详情</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >同意</el-button
        >
      </template>
    </el-table-column>
  </el-table>


  <!-- 详情弹框 -->
  <el-dialog v-model="dialogVisible" title="订单详情" width="800">
    <span>
      <div class="asd">
        <!-- 用户 -->

        <p>用户名：{{ useFrom.manber_id }}</p>

        <!-- 快递编号： -->

        <p>退货单号：{{ useFrom.return_sn }}</p>
    
        <p>
          状态：{{
            useFrom.return_type ==1? "退货":"换货"
              
          }}
        </p>
      </div>

      <el-card
        style="max-width: 600px"
        v-for="time in useFrom.order_info"
        :key="time.id"
      >
        <div class="box">
          <div>
            <img :src="time.goods_img"  style="width: 100px; height: 100px;" />
          </div>
          <div>
            <p>商品名称：{{ time.goods_name }}</p>
            <p>商品价格：{{ time.price }}</p>
            <p>商品数量：{{ time.number }}</p>
            <p>单价：{{ time.price }} 单个总价：{{ time.goods_total }}</p>
          </div>
        </div>
      </el-card>

      <!-- 购买时间 -->
      <div class="gou">
        <p>总价：{{ useFrom.order_price }}</p>
        <p>退货时间：{{ useFrom.return_time }}</p>
        <p>原因：{{ useFrom.reason }}</p>
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>








</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box p {
  margin-top: 20px;
}
.gou {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}
.asd {
  display: flex;
  justify-content: space-around;
  font-size: 17px;
}
</style>
